<template>
  <div class="tenantroomy">
    <div class="roomy-swiper">
      <div v-if="isnone<1" class="none">
        <img v-if="baseUrl" :src="baseUrl+'imgs/imgs/none.png'" alt="">
      </div>
      <swiper v-if="isnone>0" class="swiper" :indicator-dots="indicatorDots" indicator-color="rgba(190, 190, 190, .55)" indicator-active-color="#BEBEBE"	circular="true"  duration="500" @change="swiperChange">
        <swiper-item v-for="(item, index) in tenantInfoRoom" :key="index">
          <div class="swiper-item">
            <div class="room-name">
              {{ item.address }}
            </div>
            <div class="zuing">
              <img v-if="baseUrl" :src="baseUrl+'house/renting.png'" alt="">
            </div>
            <div class="money">
              {{item.rent}}
              <span>/月</span>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
    <div v-if="isnone>0">
      <div class="roomy-time">
        <div class="time-title">租约时间</div>
        <div class="times">{{roomyTime}}</div>
      </div>
      <div class="roomy-list">
        <div class="title">室友</div>
        <div class="roomy-itme" v-for="(item, index) in roomyList" :key="index">
          <div class="item-left">
            <div class="roomy-head">
            <img v-if="baseUrl" :src="baseUrl+'home/man.png'" alt="">
            </div>
            <div class="roomy-info">
              <div class="name">{{item.roommatename}}</div>
              <div class="idcard">
                身份证号：{{item.roommatecardid}}
              </div>
            </div>
          </div>
          <div class="item-right" @click="delRoomy(item)">
            <img v-if="baseUrl" :src="baseUrl+'tenant/detail.png'" alt="">
          </div>
        </div>
      </div>
      <div class="roomy-btn">
        <div class="btn" @click="addRoomy">
          <img v-if="baseUrl" :src="baseUrl+'tenant/add.png'" alt="">
          <div class="text">添加室友</div>
        </div>
      </div>
    </div>
  
  </div>
</template>

<script>
import { getRoomyList, delRoomy } from '@/apis/tenant/roomy'
import { TenantDefault } from '@/apis/tenant/home'
export default {
  components: {
  },
  data() {
    return {
      indicatorDots: true,
      tenantInfoRoom:[
        {
          address:'',
          rent: ''
        }
      ],
      roomyList:[
        
      ],
      houseid: 0,
      roomyTime: '',
      index: 0
    }
  },
  created(){
    this.TenantDefault()
  },
  computed: {
    isnone(){
       if(this.tenantInfoRoom[0]?.address){
         return this.tenantInfoRoom.length
       }else{
         return false
       }
    },
    userid(){
      return this.$store.state.baseStore.userInfo.userid
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    }
  },
  methods: {
    getRoomyList(item){
      getRoomyList({ 'contractid': item.wid, 'userid': this.userid }).then(res=>{
        if( res.code === 200){
          this.houseid = item.houseid
          this.roomyList = res.data
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    TenantDefault(){
      TenantDefault({userid: this.userid,type:1}).then(res => {
        if(res.code == 200){
          if(!res.data){
             this.tenantInfoRoom= []
             return
          }
          this.tenantInfoRoom = res.data
          this.roomyTime = res.data[0].starttime + ' - ' + res.data[0].endtime
          this.getRoomyList(this.tenantInfoRoom[0])
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },
    delRoomy(item){
      let that = this
      delRoomy({wid:item.wid}).then((res)=>{
        if(res.code == 200){
          uni.showToast({
            title: '删除成功',
            icon: 'none'
          })
          setTimeout(()=>{
            that.getRoomyList(item)
          },1500)
        }
      })
    },
    addRoomy(){
      this.$jump({ type: 'navigateTo', path:'/pages/tenant/roomy/addroomy?query=' + JSON.stringify(this.tenantInfoRoom[this.index]) })
    },
    swiperChange(e){
      this.roomyTime = this.tenantInfoRoom[e.detail.current].starttime + ' - ' + this.tenantInfoRoom[e.detail.current].endtime
      this.index = e.detail.current
      this.getRoomyList(this.tenantInfoRoom[e.detail.current])
    }
  }
}
</script>

<style lang="scss" scoped>
.tenantroomy {
  width: 100vw;
  box-sizing: border-box;
  .none{
    width: 100vw;
    background: #F9F9F9;
    // background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    img{
      width: 190px;
      height: 195px;
    }
  }
  .roomy-swiper{
    width: 100%;
    background: #FFFFFF;
    .swiper{
      height: 190px;
      box-sizing: border-box;
      padding: 0 16px;
      .swiper-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .room-name{
        margin-top: 18px;
        font-size: 22px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 30px;
        text-align: center;
      }
      .zuing{
        width: 62px;
        height: 20px;
        margin: 10px 0;
        img{
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
      }
      .money{
        text-align: center;
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FF5A65;
        line-height: 33px;
        span{
          font-size: 16px;
        }
      }
    }
  }
  .roomy-time{
    margin: 10px 0;
    box-sizing: border-box;
    padding: 15px;
    background: #fff;
    .time-title{
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 16px;
      text-align: left;
    }
    .times{
      margin-top: 10px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #9B9B9B;
      line-height: 20px;
    }
  }
  .roomy-list{
    background: #fff;
    .title{
      border-bottom: 1px solid #EFEFEF;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 46px;
      padding-left: 15px;
    }
    .roomy-itme{
      margin-left: 15px;
      border-bottom: 1px solid #EFEFEF;
      box-sizing: border-box;
      padding: 9px 0;
      padding-right: 17px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-left{
        display: flex;
      }
      .roomy-head{
        width: 45px;
        height: 45px;
        img{
        width: 100%;
        height: 100%;
        }
      }
      .roomy-info{
        margin-left: 10px;
        .name{
          margin-top: 5px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 16px;
          text-align: left;
        }
        .idcard{
          margin-top: 4px;
          line-height: 14px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9B9B9B;
        }
      }
    }
    
    .item-right{
      width: 16px;
      height: 18px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .roomy-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    .btn{
      width: 355px;
      height: 45px;
      background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
      box-shadow: 0px 2px 4px 0px rgba(252, 168, 55, 0.21), 0px 3px 5px 0px rgba(255, 175, 111, 0.14);
      border-radius: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 26px;
        height: 26px;
      }
      .text{
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 45px;
        text-shadow: 0px 2px 4px rgba(252, 168, 55, 0.21);
      }
    }
  }
}
</style>
